import React, { useRef, useEffect } from 'react';
import MessageBubble from './MessageBubble';

const ChatContainer = ({ messages, loading }) => {
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  return (
    <div className="flex-1 overflow-y-auto px-4 py-6 bg-white">
      {messages.length === 0 ? (
        <div className="h-full flex flex-col items-center justify-center text-gray-500">
          <div className="w-16 h-16 mb-6 bg-blue-100 rounded-full flex items-center justify-center">
            <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-10 h-10 text-blue-600">
              <path d="M16 5.33a4.67 4.67 0 100 9.34 4.67 4.67 0 000-9.34zM10.4 21.33a5.6 5.6 0 00-5.6 5.6v.94h22.4v-.94a5.6 5.6 0 00-5.6-5.6H10.4z" fill="currentColor" />
            </svg>
          </div>
          <h2 className="text-2xl mb-2 font-medium text-gray-700">晚上好，bluekey</h2>
          <p className="text-lg text-gray-500">有什么我能帮您的吗？</p>
          <div className="mt-8 grid grid-cols-2 gap-4 max-w-lg">
            <div className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
              <h3 className="font-medium mb-1">数学问题</h3>
              <p className="text-sm text-gray-500">解答各类数学问题和公式</p>
            </div>
            <div className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
              <h3 className="font-medium mb-1">代码辅助</h3>
              <p className="text-sm text-gray-500">编写和调试各种编程语言</p>
            </div>
            <div className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
              <h3 className="font-medium mb-1">创意写作</h3>
              <p className="text-sm text-gray-500">帮你撰写各类文章和故事</p>
            </div>
            <div className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
              <h3 className="font-medium mb-1">知识问答</h3>
              <p className="text-sm text-gray-500">解答各个领域的知识问题</p>
            </div>
          </div>
        </div>
      ) : (
        <div className="max-w-4xl mx-auto">
          {messages.map((message, index) => (
            <MessageBubble
              key={message.id || index}
              isUser={message.role === 'user'}
              content={message.content}
              timestamp={message.timestamp}
              isStreaming={message.isStreaming}
            />
          ))}
          {loading && (
            <MessageBubble
              isUser={false}
              isLoading={true}
            />
          )}
        </div>
      )}
      <div ref={messagesEndRef} />
    </div>
  );
};

export default ChatContainer;